<template>
  <div class="change-pass">
    <h3>修改密码</h3>
    <el-divider></el-divider>
    <el-form :model="form" :rules="rules" ref="ruleRef" label-width="100px" class="demo-ruleForm">
      <el-form-item label="当前密码" prop="oldPassword" >
        <el-input placeholder="密码长度6到20，可由字母、数字、下划线组成，必须包含数字和字母" v-model="form.oldPassword" type="password" ></el-input>
        <span class="err-message" v-if="passError">旧密码不正确</span>
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input placeholder="密码长度6到20，可由字母、数字、下划线组成，必须包含数字和字母" v-model="form.newPassword" type="password"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPass">
        <el-input placeholder="确认密码和新密码保持一致" v-model="form.confirmPass" type="password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('ruleRef')">修改密码</el-button>
      </el-form-item>
    </el-form>
    <!--    修改头像dialog-->
    <change-avatar-dialog></change-avatar-dialog>
<!--  修改密码成功后的倒计时-->
    <el-dialog
      title="跳转提示"
      :visible.sync="jumpDialogVisible"
      :show-close=false
      :close-on-click-modal=false
      :close-on-press-escape=false
      width="30%">
      <span>密码修改成功，将于{{time}}秒后跳转登录页面，或者点击“确认”按钮提前跳转</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="jumpClick">确 定</el-button>
       </span>
    </el-dialog>
  </div>
</template>

<script>
import ChangeAvatarDialog from "@/views/profile/ChangeAvatarDialog";
import {updatePassword} from "@/network/system/administrator";

export default {
  name: "ChangePass",
  components: {ChangeAvatarDialog},
  created() {
    const admin = JSON.parse(window.localStorage.getItem("admin"));
    this.form.id = admin.ad_id;
  },
  data() {
    let checkPw = ((rule,value,callback)=>{  //验证密码
      if(!/\w{6,20}/.test(value) || !/[0-9]/.test(value) || !/[A-Za-z]/.test(value)) {
        return callback(new Error('密码长度6到20，可由字母、数字、下划线组成，必须包含数字和字母'));
      }
      callback();
    })
    let checkConfirmPw = ((rule,value,callback)=>{  //验证确认密码
      if(value!=this.form.newPassword){
        return callback(new Error("两次密码不一致!"));
      }
      if(!/\w{6,20}/.test(value) || !/[0-9]/.test(value) || !/[A-Za-z]/.test(value)) {
        return callback(new Error('密码长度6到20，可由字母、数字、下划线组成，必须包含数字和字母'));
      }
      return callback();
    })
    return {
      jumpDialogVisible:false,  //页面跳转提示
      passError:false,  //旧密码是否正确
      time:5 , //倒计时
      interval: null, //计时器
      form: {
        id:'',  //管理员id
        oldPassword: '',  //旧密码
        newPassword: '',  //新密码
        confirmPass: ''  //确认密码
      },
      rules: {
        oldPassword: [
          {required: true, message: '请输入旧密码', trigger: 'blur'},
          { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' },
          { validator: checkPw, trigger: 'blur' },
        ],
        newPassword:[
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' },
          { validator: checkPw, trigger: 'blur' },],
        confirmPass: [
          { required: true, message: '请输入确认密码', trigger: 'blur' },
          { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' },
          { validator: checkConfirmPw, trigger: 'blur' }],
      }
    }
  },
  methods:{
    closeMessage(){  //删除提示信息
      this.passError = false;
    },
    onSubmit(formName){
      this.$refs[formName].validate(valid=>{
        if(valid){  //校验通过
          updatePassword(this.form).then(res=>{
            if(res.data.status == 200){
              this.closeMessage();
              this.time = 5;
              this.jumpDialogVisible = true;
              //定时跳转页面
              let interval = setInterval(()=>{
                this.time--;
                if(this.time==0){
                  clearInterval(interval);
                  window.localStorage.removeItem("admin");
                  this.jumpDialogVisible = false;
                  this.$router.replace('/login');
                }
              },1000);

              // MessageBox.alert(`密码修改成功，将于${this.time}秒后跳转登录页面，或者点击“确认”按钮提前跳转`,'跳转提示',{
              //   confirmButtonText: '确定',
              //   showClose:false,
              //   showCancelButton:false,
              //   closeOnPressEscape: false,
              //   closeOnHashChange:false,
              //   callback: action => {
              //     window.localStorage.removeItem("admin");  //清空登录信息
              //     this.$router.replace("/login");
              //   }
              // })
            }else if(res.data.status==300){
              this.closeMessage();
              this.passError = true;
              this.$message.error("旧密码不正确！");
            }else{
              this.closeMessage();
              this.$message.error("修改密码失败，请重新操作！");
            }
          })
        }else{
          this.$message.error("请按提示填写表单！");
        }
      })
    },
    jumpClick(){  //点击提前进行跳转
      this.jumpDialogVisible = false;
      window.localStorage.removeItem("admin");
      clearInterval(this.interval);
      this.$router.replace('/login');
    }
  }
}
</script>

<style scoped>
  .err-message{
    color: #ff0000;
  }
</style>
